<template>
   <div class="index">
      <h3 >echarts图表可视化</h3>
      <Bar :bars="bars"></Bar>
      <Bar :bars="bars"></Bar>
   </div>
</template>

<script>
import {charts} from "@/network/login"
import Bar from "@/components/echarts/bar"
export default {
  data(){
     return{
        bars:{}
     }
  },
  created(){
  this.getcharts()
  },
  components:{
     Bar
  },
  methods:{
     getcharts(){
        charts('/echarts').then(res=>{
           console.log(res.data.bar);
           this.bars=res.data.bar
        })
     }
  }

}
</script>

<style scoped lang="less">
    .index{
       height:100%;
       background: #fff;
      border-radius: 30px;
      h3{
         text-align: center;
      }
    }

</style>